<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <link href="./CSS/demo1.css" rel="stylesheet">
</head>
<body>
<div id="a"></div>
<div id="root">
    <header>
        <div class="header">
            <div class="logo">
                <img alt="" src="./images/demo1_logo.png">
            </div>
            <nav>
                <ul>
                    <li :class="index === 0 ? 'atStyle' : ''" v-for="(text, index) in navs">
                        <a href="#">{{text}}</a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="slideshow">
            <ul>
                <li v-for="item in slideshows">
                    <img :src="item.img" alt="">
                    <div>
                        <h2>{{item.title}}</h2>
                        <p>{{item.text}}</p>
                        <button>了解更多>></button>
                    </div>
                </li>
            </ul>
            <ul>
                <li v-for="item in slideshows"></li>
            </ul>
        </div>
        <div class="content">
            <div>
                <h4>战略合作 Strategic partners</h4>
                <p>真诚、共赢、无微不至</p>
                <ul class="cont_1">
                    <li v-for="img in partners"><a href=""><img :src="img" alt=""></a></li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div>
                <h4>我们的优势 Our Advantages</h4>
                <p>创独一无二的设计，造国际品质的产品，行无微不至的服务</p>
                <ul class="cont_2">
                    <li v-for="cont in advantages">
                        <div class="successImg"></div>
                        <p>{{cont.title}}</p>
                        <p>{{cont.text}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div>
                <h4>成功案例 Successful Case</h4>
                <p>始终以建设温馨、和谐的家园，提升您的家居生活品味为己任。</p>
                <ul class="cont_success">
                    <li>
                        <ul class="navs">
                            <li :class="index === 0 ? 'sanjiao' : ''" v-for="(item, index) in cont3_navs.title"
                                :key="item.id">{{item.name}}
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul class="navs_img">
                            <li v-for="img in cont3_navs.images[0]"><img :src="img" alt=""></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content_news">
            <ul>
                <li class="news" v-for="items in news" :key="items.id">
                    <h3>{{items.title}}</h3>
                    <ul>
                        <li v-for="item in items.texts" :key="item.id">
                            <a href=""><span>{{item.new}}</span><span>{{item.time}}</span></a>
                        </li>
                        <li class="btn">
                            <button><a href="#a">MORE INFO →</a></button>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </main>
</div>
<footer>
    <ul>
        <li><a href="#">首页展示</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a href="#">产品展示</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a href="#">客户案例</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a href="#">新闻资讯</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a href="#">帮助中心</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a href="#">解决方案</a>&nbsp;&nbsp;|&nbsp;&nbsp;</li>
        <li><a href="#">联系我们</a>
    </ul>
    <p>Copyright©2002-2015上海机械设备服务有限公司 版权所有Power by DedeCms</p>
    <p>电话:15918779820 E-mail:89898981@qq.com地址:上海市沙河广园东路1858新天地服装城</p>
</footer>
<script src="./demo1.js"></script>
</body>
</html>